<template>
    <div class="appTable">
        <div class="table">
            <div class="mask"></div>
            <div class="table_title">{{ table_title }}管理</div>
            <div class="table_btns" v-if="operate">
                <el-button @click="handleAdd" style="margin-right: 4%" type="primary" icon="el-icon-folder-add">添加</el-button>
            </div>
            <div class="table_body">
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage"></zy-table>
            </div>
            <zy-form ref="zyform" :dialog="dialog" @add="add" @set="edit"></zy-form>
        </div>
        <nameplate ref="nameplate" :template="template" @submit="submitNameplate" />
        <server-state ref="serverState" />
    </div>
</template>
<script>
import { config, column } from './formConfig.js'
import BasicManage from '@/components/basic/BasicManage.vue'
import Nameplate from './Nameplate.vue'
import serverState from './serverState.vue'
import { pinyin } from 'pinyin-pro'
export default {
    extends: BasicManage,
    components: {
        Nameplate,
        serverState,
    },
    data() {
        return {
            table_title: '项目',
            url: 'project',
            dialog: {
                config: [],
                form: {},
                title: '',
                labelWidth: '100px',
            },
            baseForm: {
                name: '',
                short_name: '',
                win_num: '',
                win_code: '',
                exp_time: '2099-01-01 00:00:00',
                template: JSON.stringify([
                    { label: 'windows账号', account: 'Administrator', password: 'Zykc@2023!' },
                    { label: 'Mysql数据库', account: 'root', password: 'fuzhouiot-2020' },
                    { label: 'Todesk/向日葵', account: '', password: 'Zykc.1234' },
                    { label: '平台超级管理员账号', account: 'superadmin', password: 'Zykcadmin123' },
                    { label: '平台普通管理员账号', account: 'admin', password: 'Zykcadmin123' },
                    { label: 'Emqx后台账号', account: 'admin', password: 'emqx!zykc123' },
                    { label: 'Mqtt客户端账号', account: 'zykc2022', password: '!zykc123' },
                ]),
            },
            template: [],
            data: {},
        }
    },
    methods: {
        showNameplate(val) {
            this.data = val
            this.template = JSON.parse(val.template)
            this.$refs.nameplate.openDialog()
        },
        handleServer(val) {
            this.data = val

            let { states } = val
            this.$refs.serverState.openDialog(states)
        },
        submitNameplate(template) {
            this.$refs.nameplate.closeDialog()
            this.edit(Object.assign(this.data, { template: JSON.stringify(template) }))
        },
        copy(val) {
            // navigator.clipboard.writeText(val.activate_code).then(() => {
            //     this.$message.success('复制成功')
            // })
            //navigator.clipboard需在https环境下使用，此处改为兼容写法
            // 兼容写法，使用第三方库vue-clipboard2
            this.$copyText(val.activate_code).then(() => {
                this.$message.success('复制成功')
            })
        },
    },
    created() {
        config[0].onChange = (config, form) => {
            this.$set(form, 'short_name', pinyin(form.name, { pattern: 'first', toneType: 'none' }).replace(/\s*/g, ''))
        }
        column[column.length - 1].buttons = [
            {
                text: '详情',
                click: (val) => {
                    this.showNameplate(val)
                },
                icon: 'el-icon-s-comment',
            },
            {
                text: '编辑',
                click: (val) => {
                    this.handleEdit(val)
                },
                icon: 'el-icon-edit',
            },
            {
                text: '服务状态',
                click: (val) => {
                    this.handleServer(val)
                },
                icon: 'el-icon-share',
                if: (val) => val.states,
            },
            {
                text: '复制激活码',
                click: (val) => {
                    this.copy(val)
                },
                icon: 'el-icon-document-copy',
            },
            {
                text: '删除',
                click: (val) => {
                    this.delete(val)
                },
                icon: 'el-icon-delete',
            },
        ]
        column[column.length - 1].if = this.operate
        this.dialog.config = config
        this.tableColumn = column
        this.getlist()
    },
}
</script>
